<template>
  <Nav :showBlack="false">
    <img src="../assets/title.png" class="logo" alt=""  >
  </Nav>
  <div class="page">
     <div class="left">
        <div class="lists">
          <div class="item active">全部课程</div>
          <div class="item">长江雅 · 丝韵</div>
          <div class="item">瓷器文化</div>
          <div class="item">植物科普</div>
          <div class="item">航空航天</div>
        </div>
     </div>
     <div class="right">
        <div class="courses">
          <div class="item" @click="goVideoDetail">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
          <div class="item">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
          <div class="item">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
          <div class="item">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
          <div class="item">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
          <div class="item">
            <div class="imgbox">
              <img src="../assets/play.png" alt="">
            </div>
            <div class="infoBox">
              <div class="name">宣纸载茶经，手礼传古韵</div>
              <div class="infoText">
                宣纸茶经作为文创伴手礼，其文化寓意体现在对传统文化的尊重与传承、艺术与生活的和
              </div>
            </div>
          </div>
        </div>
     </div>
  </div>
  <Footer/>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
import Footer from '@/components/tab.vue'
import Nav from "@/components/nav.vue"
const goVideoDetail = () => {
  router.push({path:'videoDetail'})
}
</script>
<style scoped lang="scss">
@import '@/assets/style/mixin';
.page {
  background: #0f1830;
  padding-top: 170px;
  padding-bottom: 200px;
  color:#fff;
  display: flex;
  overflow: hidden !important;
  .left {
     width: 390px;
     flex:none;
    .lists {
      padding: 0 47px;
      .item {
        font-size: 40px;
        width: 307px;
        height: 89px;
        margin: 20px 0;
        text-align: center;
        line-height: 89px;
        &.active {
          background: #f5ead0;
          border-radius: 46px;
          color:#222222;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    flex:1;
    padding-right: 39px;
    height: 100%;
    overflow-y: auto;
    .item {
      border:1px #4a4d52 solid;
      border-radius: 36px;
      padding:32px;
      margin-bottom: 28px;
      .imgbox {
        width: 100%;
        height: 324px;
        background: pink;
        border-radius: 10px;
        img {
          width: 100px;
          height: 100px;
        }

        margin-bottom: 28px;
        @include  center();
      }
      .infoBox {
        .name {
          font-size: 38px;
          margin-bottom: 20px;
        }
        .infoText {
          font-size: 28px;
          line-height: 1.6;
        }
      }
    }
  }
}
.logo {
  height: 50px;
  width: auto;
}
.courses {

}
</style>
